<template>
  <div>
    <v-container class="pa-0 mb-2">
      <v-row no-gutters>
        <v-col>
          <v-list two-line subheader class="pa-0">
            <v-list-item class="pa-0">
              <v-list-item-content>
                <div>
                  <TaskStatus :status="item.status" />
                </div>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-col>
        <v-col>
        <v-list two-line subheader class="pa-0">
          <v-list-item class="pa-0">
            <v-list-item-content>
              <v-list-item-title>Author</v-list-item-title>
              <v-list-item-subtitle>{{ user.name }}</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
        </v-col>
        <v-col>
          <v-list two-line subheader class="pa-0">
            <v-list-item class="pa-0">
              <v-list-item-content>
                <v-list-item-title>Started</v-list-item-title>
                <v-list-item-subtitle>
                  {{ item.start | formatDate }}
                </v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-col>
        <v-col>
          <v-list-item class="pa-0">
            <v-list-item-content>
              <v-list-item-title>Duration</v-list-item-title>
              <v-list-item-subtitle>
                {{ [item.start, item.end] | formatMilliseconds }}
              </v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-col>
      </v-row>
    </v-container>
    <div class="task-log-view" ref="output">
      <div class="task-log-view__record" v-for="record in output" :key="record.id">
        <div class="task-log-view__time">
          {{ record.time | formatTime }}
        </div>
        <div class="task-log-view__output">{{ record.output }}</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .task-log-view {
    background: black;
    color: white;
    height: calc(100vh - 300px);
    overflow: auto;
    font-family: monospace;
    margin: 0 -24px -20px;
    padding: 5px 10px;
  }

  .task-log-view__record {
    display: flex;
    flex-direction: row;
    justify-content: left;
  }

  .task-log-view__time {
    width: 120px;
    min-width: 120px;
  }

  .task-log-view__output {
    width: 100%;
  }
</style>
<script>
import axios from 'axios';
import TaskStatus from '@/components/TaskStatus.vue';
import socket from '@/socket';

export default {
  components: { TaskStatus },
  props: {
    itemId: Number,
    projectId: Number,
  },
  data() {
    return {
      item: {},
      output: [],
      user: {},
    };
  },
  watch: {
    async itemId() {
      this.reset();
      await this.loadData();
    },

    async projectId() {
      this.reset();
      await this.loadData();
    },
  },
  async created() {
    socket.addListener((data) => this.onWebsocketDataReceived(data));
    await this.loadData();
  },

  methods: {
    reset() {
      this.item = {};
      this.output = [];
      this.user = {};
    },

    onWebsocketDataReceived(data) {
      if (data.project_id !== this.projectId || data.task_id !== this.itemId) {
        return;
      }

      switch (data.type) {
        case 'update':
          Object.assign(this.item, {
            ...data,
            type: undefined,
          });
          break;
        case 'log':
          this.output.push(data);
          setTimeout(() => {
            this.$refs.output.scrollTop = this.$refs.output.scrollHeight;
          }, 200);
          break;
        default:
          break;
      }
    },

    async loadData() {
      this.item = (await axios({
        method: 'get',
        url: `/api/project/${this.projectId}/tasks/${this.itemId}`,
        responseType: 'json',
      })).data;

      this.output = (await axios({
        method: 'get',
        url: `/api/project/${this.projectId}/tasks/${this.itemId}/output`,
        responseType: 'json',
      })).data;

      this.user = (await axios({
        method: 'get',
        url: `/api/users/${this.item.user_id}`,
        responseType: 'json',
      })).data;
    },
  },
};
</script>
